<template>
  <div>
    <!-- 面包靴导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>商品管理</el-breadcrumb-item>
      <el-breadcrumb-item>商品分类</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 卡片区域 -->
    <el-card class="box-card">
      <!-- 添加商品分类按钮 -->
      <template>
        <el-row>
          <el-col>
            <el-button type="primary" @click="isShowAdd">添加分类</el-button>
          </el-col>
        </el-row>
        <tree-table
          :data="cateList"
          :columns="columns"
          :expand-type="false"
          show-index
          index-text="#"
          :show-row-hover="false"
          :selection-type="false"
          border
        >
          <template slot="cat_deleted" slot-scope="{ row }">
            <i
              class="el-icon-success"
              style="color: green"
              v-if="!row.cat_deleted"
            ></i>
            <i class="el-icon-error" style="color: red" v-else></i>
          </template>
          <template slot="cat_level" slot-scope="{ row }">
            <el-tag size="mini" v-if="row.cat_level === 0">一级</el-tag>
            <el-tag size="mini" type="success" v-else-if="row.cat_level === 1"
              >二级</el-tag
            >
            <el-tag size="mini" type="warning" v-else>三级</el-tag>
          </template>
          <template slot="opt">
            <el-button type="primary" size="mini" icon="el-icon-edit"
              >编辑</el-button
            >

            <el-button type="danger" size="mini" icon="el-icon-delete"
              >删除</el-button
            >
          </template>
        </tree-table>
      </template>

      <!-- 页码条 -->
      <el-pagination
        @size-change="pageSizeChange"
        @current-change="pageChange"
        :current-page="queryData.pagenum"
        :page-sizes="[2, 3, 5, 10]"
        :page-size="queryData.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </el-card>

    <!-- 新增分类对话框 -->
    <el-dialog
      title="新增分类"
      :visible.sync="addDialogVisible"
      width="50%"
      @close="handleAddDialogClose"
    >
      <!-- 新增表单 -->
      <el-form
        ref="addFormRef"
        :model="addForm"
        :rules="addRules"
        label-width="80px"
      >
        <el-form-item label="分类名称" prop="cat_name">
          <el-input v-model="addForm.cat_name"></el-input>
        </el-form-item>

        <!-- 级联选择器 -->
        <el-form-item label="父级分类">
          <el-cascader
            v-model="selectedKeys"
            :options="panrentCateList"
            clearable
            :props="{
              expandTrigger: 'hover',
              checkStrictly: true,
              value: 'cat_id',
              label: 'cat_name',
            }"
            @change="handleChange"
          ></el-cascader>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addCate">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data () {
    return {
      queryData: {
        pagenum: 1, // 当前页码
        pagesize: 10 // 页容量
      },
      cateList: [], // 分类数组
      total: 0, // 总条数
      columns: [
        {
          label: '分类名称',
          prop: 'cat_name'
        },
        {
          label: '是否有效',
          prop: 'cat_deleted',
          type: 'template',
          template: 'cat_deleted'
        },
        {
          label: '排序',
          prop: 'cat_level',
          type: 'template',
          template: 'cat_level'
        },
        {
          label: '操作',
          type: 'template',
          template: 'opt'
        }
      ],
      addDialogVisible: false, // 是否显示新增对话框
      addForm: { // 表单数据对象
        cat_name: '',
        cat_pid: '',
        cat_level: ''
      },
      addRules: { // 表单校验规则对象
        cat_name: [
          { required: true, message: '请输入分类名称', trigger: 'blur' }
        ]
      },
      // 设置用来保存分类信息的数组 父级分类
      panrentCateList: [],
      // 选中的分类
      selectedKeys: []
    }
  },
  created () {
    this.getCateList()
  },
  methods: {
    // 更改级联选择器的触发方式
    addCate () {
      this.$refs.addFormRef.validate(async isOk => {
        // 如果失败 return
        if (!isOk) return
        // 异步请求
        const { data: res } = await this.$http.post('categories', this.addForm)
        if (res.meta.status !== 201) this.$message.error('添加用户失败!')
        // 添加成功 重新渲染列表
        this.getParentCateList()
        this.$message.success('添加用户成功!')
        // 关闭对话框
        this.addDialogVisible = false
        this.$msg.success(res.meta.msg)
      })
    },
    handleChange () {
      this.addForm.cat_pid = this.selectedKeys.length === 0 ? 0 : this.selectedKeys[this.selectedKeys.length - 1]
      this.addForm.cat_level = this.selectedKeys.length
    },
    // 点击开启对话框
    isShowAdd () {
      // 点击对话框获取分类信息
      this.getParentCateList()
      this.addDialogVisible = true
    },
    // 获取分类信息
    async getParentCateList () {
      const { data: res } = await this.$http.get('categories', { params: { type: 2 } })
      // 保存数据
      this.panrentCateList = res.data
    },
    handleAddDialogClose () { // 关闭对话框事件
      this.$refs.addFormRef.resetFields()
      // 关闭对话框手动清空数据
      this.addForm = { // 表单数据对象
        cat_name: '',
        cat_pid: 0,
        cat_level: 0
      }
      this.selectedKeys = []
    },
    // addCate () { // 添加用户
    // // 校验表单
    //   this.$refs.addFormRef.validate(async isOk => {
    //     // 如果校验失败，则退出函数
    //     if (!isOk) return false
    //     // 如果成功，则发送异步请求
    //     const { data: resBody } = await this.$http.post('users', this.addForm)
    //     // 如果 添加失败，则返回
    //     if (resBody.meta.status !== 201) return this.$msg.error(resBody.meta.msg)
    //     // 如果 添加成功，则重新请求渲染列表
    //     this.getCateList()
    //     // 关闭窗口
    //     this.addDialogVisible = false
    //     // 提示消息

    //   })
    // },
    pageSizeChange (newPageSize) {
      // 将 选择 的 新的 页容量 ，设置给 data
      this.queryData.pagesize = newPageSize
      // 重新请求 当前页数据
      this.getCateList()
    },
    pageChange (newPageIndex) {
      // 将 被点击的 页码 设置给 data
      this.queryData.pagenum = newPageIndex
      // 重新请求 当前页数据
      this.getCateList()
    },
    // 异步请求 分类列表
    async getCateList () {
      // 发送异步请求，并 解构返回对象中的 data属性，赋值给 resBody
      const { data: resBody } = await this.$http.get('categories', {
        params: this.queryData
      })
      console.log(resBody)
      // 如果失败，则显示错误消息，并退出函数执行
      if (resBody.meta.status !== 200) return this.$msg.error(resBody.meta.msg)
      // 如果成功，则将返回的 分页数据 设置给 组件的 data，触发 视图的重绘
      this.cateList = resBody.data.result
      // 将 返回的 总分类数量 设置给 data
      this.total = resBody.data.total
      console.log(this.total)
    }
  }
}
</script>

<style lang="less" scoped>
.el-button {
  margin-bottom: 15px;
}
.el-cascader {
  width: 100%;
}
</style>
